<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档管理 - 控制面板</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .document-list {
            margin-top: 20px;
        }
        .document-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .document-info {
            flex: 1;
        }
        .document-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        .document-meta {
            color: #666;
            font-size: 14px;
        }
        .document-actions {
            display: flex;
            gap: 10px;
        }
        .document-image {
            width: 100px;
            height: 70px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 15px;
            border: 1px solid rgba(30, 140, 255, 0.3);
            box-shadow: 0 2px 8px rgba(0, 120, 255, 0.2);
        }
        .document-content {
            display: flex;
            align-items: center;
        }
        .btn-small {
            padding: 5px 10px;
            font-size: 14px;
        }
        .featured-badge {
            display: inline-block;
            padding: 3px 8px;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }
        .category-badge {
            display: inline-block;
            padding: 3px 8px;
            background-color: #2196F3;
            color: white;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #666;
        }
        
        /* 分类筛选栏 - 科技风格 */
        .filter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            background: linear-gradient(145deg, rgba(0, 10, 30, 0.8), rgba(10, 30, 60, 0.9));
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 120, 255, 0.2), 
                        inset 0 1px 2px rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(30, 140, 255, 0.3);
            animation: categoryNavGlow 5s infinite alternate;
        }
        
        .filter-bar::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 170, 255, 0.1) 0%, transparent 70%);
            transform: rotate(0deg);
            z-index: 0;
            opacity: 0.5;
            pointer-events: none;
            animation: categoryNavBg 15s linear infinite;
        }
        
        .filter-title {
            font-weight: bold;
            margin-right: 15px;
            color: #ffffff;
            position: relative;
            z-index: 1;
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
        }
        
        .filter-options {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }
        
        .category-filter {
            display: inline-block;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(30, 140, 255, 0.4);
            border-radius: 30px;
            color: rgba(200, 230, 255, 0.9);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 10px rgba(0, 100, 255, 0.1);
            text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);
        }
        
        .category-filter::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s;
        }
        
        .category-filter:hover {
            transform: translateY(-3px) scale(1.03);
            background: rgba(0, 100, 255, 0.2);
            border-color: rgba(30, 180, 255, 0.8);
            color: #ffffff;
            box-shadow: 
                0 5px 15px rgba(0, 120, 255, 0.3),
                0 0 5px rgba(0, 150, 255, 0.5);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        }
        
        .category-filter:hover::before {
            left: 100%;
            transition: all 0.8s;
        }
        
        .category-filter.active {
            background: linear-gradient(135deg, rgba(0, 120, 255, 0.7), rgba(0, 180, 255, 0.5));
            color: white;
            border-color: rgba(100, 200, 255, 0.8);
            box-shadow: 
                0 5px 15px rgba(0, 150, 255, 0.4),
                0 0 10px rgba(0, 200, 255, 0.3),
                inset 0 0 5px rgba(255, 255, 255, 0.5);
            animation: activeGlow 2s infinite alternate;
        }
        
        .category-filter span {
            position: relative;
            z-index: 1;
        }
        
        .category-filter .count {
            display: inline-block;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 0 6px;
            margin-left: 5px;
            font-size: 0.85em;
            transition: all 0.3s;
        }
        
        .category-filter:hover .count {
            background: rgba(0, 120, 255, 0.4);
            box-shadow: 0 0 5px rgba(0, 150, 255, 0.5);
        }
        
        /* 动画效果 */
        @keyframes categoryNavGlow {
            0% { box-shadow: 0 5px 20px rgba(0, 120, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1); }
            100% { box-shadow: 0 5px 30px rgba(0, 150, 255, 0.4), inset 0 1px 5px rgba(255, 255, 255, 0.2); }
        }
        
        @keyframes categoryNavBg {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes activeGlow {
            0% { box-shadow: 0 5px 15px rgba(0, 150, 255, 0.4), 0 0 10px rgba(0, 200, 255, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.5); }
            100% { box-shadow: 0 5px 25px rgba(0, 180, 255, 0.6), 0 0 15px rgba(0, 230, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.7); }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>控制面板</h2>
            </div>
            <ul class="sidebar-menu">
                <li><a href="/dashboard">主页</a></li>
                <li><a href="/dashboard/profile">个人信息</a></li>
                <li><a href="/dashboard/change-password">修改密码</a></li>
                <li class="active"><a href="/dashboard/documents">文档管理</a></li>
                <li><a href="/dashboard/categories">分类管理</a></li>
                <li><a href="/danmaku">弹幕墙</a></li>
                <li><a href="/" target="_blank">访问首页</a></li>
                <li><a href="/logout">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard-header">
                <div class="dashboard-title">
                    <h1 th:text="${selectedCategory != null ? selectedCategory.name + ' - 文档' : '文档管理'}">文档管理</h1>
                </div>
                <div>
                    <a href="/dashboard/documents/create" class="btn btn-primary">创建新文档</a>
                </div>
            </div>
            
            <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
            <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>
            
            <!-- 分类筛选栏 -->
            <div class="filter-bar">
                <div class="filter-title">按分类筛选:</div>
                <div class="filter-options">
                    <a href="/dashboard/documents" class="category-filter" th:classappend="${selectedCategory == null ? 'active' : ''}">所有文档</a>
                    <a th:each="cat : ${categories}" 
                       th:href="@{/dashboard/documents(categoryId=${cat.id})}" 
                       class="category-filter"
                       th:classappend="${selectedCategory != null && selectedCategory.id == cat.id ? 'active' : ''}">
                        <span th:text="${cat.name}">分类名称</span>
                        <span th:text="${'(' + cat.documents.size() + ')'}" class="count"></span>
                    </a>
                </div>
            </div>
            
            <div th:if="${documents.empty}" class="empty-state">
                <p th:if="${selectedCategory != null}">该分类下没有文档。您可以 <a href="/dashboard/documents/create" class="link">创建新文档</a> 并选择此分类。</p>
                <p th:unless="${selectedCategory != null}">您还没有创建任何文档。点击"创建新文档"按钮开始创建。</p>
            </div>
            
            <div th:unless="${documents.empty}" class="document-list">
                <div th:each="document : ${documents}" class="document-item">
                    <div class="document-info">
                        <div class="document-content">
                            <img th:if="${document.imagePath != null}" th:src="${document.imagePath}" alt="文档图片" class="document-image">
                            <div>
                                <div class="document-title">
                                    <span th:text="${document.title}">文档标题</span>
                                    <span th:if="${document.featured}" class="featured-badge">首页显示</span>
                                    <span th:if="${document.category != null}" class="category-badge" th:text="${document.category.name}">分类名称</span>
                                </div>
                                <div class="document-meta">
                                    <span th:text="${'作者: ' + document.author}">作者: 未知</span> | 
                                    <span th:text="${'创建时间: ' + #temporals.format(document.createdAt, 'yyyy-MM-dd HH:mm')}">创建时间: 2023-01-01</span> | 
                                    <span th:text="${'更新时间: ' + #temporals.format(document.updatedAt, 'yyyy-MM-dd HH:mm')}">更新时间: 2023-01-01</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="document-actions">
                        <a th:href="@{'/documents/' + ${document.id}}" class="btn btn-small btn-info">查看</a>
                        <a th:href="@{'/dashboard/documents/edit/' + ${document.id}}" class="btn btn-small btn-primary">编辑</a>
                        <a th:href="@{'/dashboard/documents/change-category/' + ${document.id}}" class="btn btn-small btn-secondary">修改分类</a>
                        <a th:href="@{'/dashboard/documents/toggle-featured/' + ${document.id}}" class="btn btn-small" 
                           th:classappend="${document.featured ? 'btn-warning' : 'btn-success'}"
                           th:text="${document.featured ? '取消首页显示' : '设为首页显示'}">
                            首页显示
                        </a>
                        <a th:href="@{'/dashboard/documents/delete/' + ${document.id}}" class="btn btn-small btn-danger" 
                           onclick="return confirm('确定要删除这个文档吗？此操作不可撤销。')">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/js/script.js"></script>
</body>
</html> 